/*
  学习目标：性能优化-
*/
import React from 'react';

export default class App extends React.Component {
  state = {
    list: [1, 2, 3],
  };

  handleClick = () => {
    // PureComponent比较后没有改变，也就没有更新
    // ❌不能改变原来的数据,因为新旧值都同一个内存地址
    this.state.list.push(4);
    // ✅一定要用新值替换旧值
    // this.setState({ list: [...this.state.list, 4] });
  };
  render() {
    const { list } = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>点我修改list</button>
        <Child list={list}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  shouldComponentUpdate(nextProps) {
    console.log('this.props.list -----> ', this.props.list);
    console.log('nextProps.list -----> ', nextProps.list);
    console.log('新旧props比较 -----> ', this.props.list === nextProps.list);
    if (this.props.list === nextProps.list) {
      return false;
    } else {
      return true;
    }
  }
  render() {
    const { list } = this.props;
    return <h1>Child - {list}</h1>;
  }
}
